<template>
    <view>
		<u-back-top
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				:icon-style="iconStyle" 
				bottom="200" 
				:custom-style="customStyle" 
				tips="顶部" 
				top="1000">
		</u-back-top>
				
		<!-- 校友列表 -->
		<view class="content" style="background-color: #f2f2f2;">

			<view class="center_box_bg" v-if="contentList" v-for="item in contentList" :key="item.id">
				<view class="profily">
					<view class="base">
						<!-- 图片 -->
						<div @click="info(item)">
							<!-- <image class="image" :src="item.headUrl"></image> -->
							<!-- 0-互助类别，1-活动类别，2-相册类别，3-资讯类别 -->
							<view v-if="item.collectionType == 0" style="height: 120rpx; width: 120rpx; background-color: #cbe5fe;text-align: center; padding-top: 37rpx; border-radius: 20rpx;">
								<text style="font-size: 19px; color: #1b90fe;">互助</text>
							</view>
							<view v-if="item.collectionType == 1" style="height: 120rpx; width: 120rpx; background-color: #d6f0db;text-align: center; padding-top: 37rpx; border-radius: 20rpx;">
								<text style="font-size: 19px; color: #57c265;">活动</text>
							</view>
							<view v-if="item.collectionType == 2" style="height: 120rpx; width: 120rpx; background-color: #fdf0cd;text-align: center; padding-top: 37rpx; border-radius: 20rpx;">
								<text style="font-size: 19px; color: #fbdd81;">相册</text>
							</view>
							<view v-if="item.collectionType == 3" style="height: 120rpx; width: 120rpx; background-color: #f7d6e9;text-align: center; padding-top: 37rpx; border-radius: 20rpx;">
								<text style="font-size: 19px; color: #e86fb3;">资讯</text>
							</view>
						</div>
						<!-- 信息 -->
						<div>
							<view @click="info(item)">
								<text class="text1">{{item.infoTitle}}</text>
							</view>
							
							<view style="margin-top: 20rpx;">
								<text class="text3">{{ $u.date(item.creatTime, 'yyyy-mm-dd') }}</text>
								<image style="width: 20rpx; height: 20rpx; margin-left: 20rpx; margin-bottom: -5rpx; margin-right: 5rpx;" src="../../static/delete_collection.png" @click="deleteCollection(item)"></image>
								<text style="color: red; font-size: 20rpx;" @click="deleteCollection(item)">删除</text>
							</view>
						</div>
						
					</view>			
				</view>
			</view>
		</view>
			
    </view>
</template>

<script>
    export default {
        data() {
            return {
				/* 返回顶部 */
				scrollTop: 0,
				customStyle:{
					backgroundColor: '#a0cfff',
					color: '#2979ff'
				},
				iconStyle: {
 					color: '#2979ff',
 					fontSize: '34rpx'
 				},
				contentList: [],
				collection: {
					page: 1,
					size: 10,
					userId:  this.$store.state.vuex_user.openId,
				}
            }
        }, 
        onLoad() {
			//#ifdef H5
			this.$u.toast("H5不支持此功能")
			//#endif
			
			// #ifdef MP
				if (!this.$u.utils.isLogin()) return
			// #endif
			
			this.getData();
        },
        methods: {
			//获取数据
			async getData(){
				this.$u.api.collectionMy(this.collection).then(res =>  {
					console.log("收藏列表",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.collection.page == 1) {
						 this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
			},
			onReachBottom() {
				//重新请求数据，带上分页参数
				this.collection.page = this.collection.page + 1
				this.getData()
			},
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			info(item) {
				const params = {
					id: parseInt(item.collectionId)
				}
				if(item.collectionType == 0) {
					uni.navigateTo({
						url: "/pages/help/help_info?helpInfo=" + encodeURIComponent(JSON.stringify(params)),
					});
				} else if(item.collectionType == 1) {
					uni.navigateTo({
						url: "/pages/activity/activity_info?activityInfo=" + encodeURIComponent(JSON.stringify(params)),
					});
				} else if(item.collectionType == 2) {
					uni.navigateTo({
						url: "/pages/album/album_info?albumInfo=" + encodeURIComponent(JSON.stringify(params)),
					});
				} else if(item.collectionType == 3) {
					uni.navigateTo({
						url: "/pages/news/news_info?newsInfo=" + encodeURIComponent(JSON.stringify(params)),
					});
				}
				
			},
			async deleteCollection(item) {
				var that = this
				uni.showModal({
					mask: true,
					title: '温馨提示',
					content: '您确实删除吗？删除后将不可恢复！',
					// cancelColor: '#f11356',
					confirmColor: '#f11356',
					success(res) {
						if (res.confirm) {
							that.$u.api.collectionDelete(item).then(res =>  {
								if(res.code == 200) {
									uni.showToast({
										icon:"success",
										title:"删除成功"
									})
									that.getData();
								} else {
									 uni.showToast({
										icon:"error",
										title:"删除失败"
									 })
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								icon: "success",
								title: "取消成功"
							})
						}
					},
					fail: error => {}
				})
			}
        }
    }
</script>

<style lang="scss">
	
    .content {
        height:100vh;
		background-color: #f2f2f2;
    }
	.center_box_bg {
		background-color: #f2f2f2;
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 150px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px #bebebe;
		}
	}
	.base {
		display: flex;
		// justify-content: space-between;//两端对齐
		// flex-wrap: wrap;//自动换行
		align-items: center;
		// border-bottom: 2px solid #F6F6F6; //下划线
		// padding-bottom: 35upx;
		position: relative;
		.image {
			height: 120upx;
			width: 120upx;
			background-size: 100%;
			border-radius: 50px;
		}
		
		.text1 {
			margin-left: 50rpx;
			font-size: medium;
			font-weight: 600;
		}
		.text2 {
			font-size: 14px;
			margin-left: 20rpx;
			color: #193867;
		}
		.text3 {
			margin-top: 50rpx;
			margin-left: 50rpx;
			font-size: 13px;
			color: #cccccc;
		}

	}
</style>